<template>
	<view class="title-item">
		<view class="flex justify-center align-center item-title">
			<text class="title-text">爆</text>
			<text class="title-text">品</text>
			<text class="title-text">推</text>
			<text class="title-text">荐</text>
		</view>
		<view class="title">
			食·尚·无·忧
		</view>
	</view>
</template>

<script>
</script>

<style>
	.title-text{
		width: 51upx;
		height: 51upx;
		background-color: #621313;
		border-radius:50%;
		font-family: PingFang-SC-Bold;
		font-size: 28upx;
		color: #ffffff;
		text-align: center;
		line-height:51upx;
		
	}
	.title-item{
		padding:0 81upx;
	}
	.item-title:after,.item-title:before{
		display: block;
		content: '';
		width:142upx;
		height:2upx;
		position: absolute;
		top:50%;
		margin-top:-1upx;
		background: #621313;
	}
	.item-title{
		position:relative;
		margin-top:107upx;
	}
	.item-title:after{
		left:0;
	}
	.item-title:before{
		right:0;
	}
	.title{
		font-family: PingFang-SC-Medium;
		font-size: 24upx;
		text-align: center;
		margin-top: 20upx;
		color: #9b4c21;
	}
</style>
